:root {
    --bg: #000000;
    --clr-1: #00c2ff;
    --clr-2: #33ff8c;
    --clr-3: #ffc640;
    --clr-4: #e54cff;

    --blur: 1rem;
    --fs: clamp(3rem, 8vw, 7rem);
    --ls: clamp(-1.75px, -0.25vw, -3.5px);
}

.header_wrap {
    border-image-slice: 27 27 27 27 fill;
    border-image-width: 20px 20px 20px 20px;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url("./images/backgroud_head.png");
    border-style: solid;
    height: 120px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 16px;
    // background-color: var(--bg);

    .header_wrap_title {
        font-size: 55px;
        color: rgb(23, 202, 240);
        font-weight: bold;
        letter-spacing: 10px;
        position: relative;
        overflow: hidden;
        // background: transparent;
        background: #000d4a;
        margin: 0;

        .aurora {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            mix-blend-mode: darken;
            pointer-events: none;
        }

        .aurora__item {
            overflow: hidden;
            position: absolute;
            width: 60vw;
            height: 60vw;
            background-color: var(--clr-1);
            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
            filter: blur(var(--blur));
            mix-blend-mode: overlay;
        }

        .aurora__item:nth-of-type(1) {
            top: -50%;
            animation: aurora-border 6s ease-in-out infinite,
                aurora-1 12s ease-in-out infinite alternate;
        }

        .aurora__item:nth-of-type(2) {
            background-color: var(--clr-3);
            right: 0;
            top: 0;
            animation: aurora-border 6s ease-in-out infinite,
                aurora-2 12s ease-in-out infinite alternate;
        }

        .aurora__item:nth-of-type(3) {
            background-color: var(--clr-2);
            left: 0;
            bottom: 0;
            animation: aurora-border 6s ease-in-out infinite,
                aurora-3 8s ease-in-out infinite alternate;
        }

        .aurora__item:nth-of-type(4) {
            background-color: var(--clr-4);
            right: 0;
            bottom: -50%;
            animation: aurora-border 6s ease-in-out infinite,
                aurora-4 24s ease-in-out infinite alternate;
        }

    }
}

@keyframes aurora-1 {
    0% {
        top: 0;
        right: 0;
    }

    50% {
        top: 100%;
        right: 75%;
    }

    75% {
        top: 100%;
        right: 25%;
    }

    100% {
        top: 0;
        right: 0;
    }
}

@keyframes aurora-2 {
    0% {
        top: -50%;
        left: 0%;
    }

    60% {
        top: 100%;
        left: 75%;
    }

    85% {
        top: 100%;
        left: 25%;
    }

    100% {
        top: -50%;
        left: 0%;
    }
}

@keyframes aurora-3 {
    0% {
        bottom: 0;
        left: 0;
    }

    40% {
        bottom: 100%;
        left: 75%;
    }

    65% {
        bottom: 40%;
        left: 50%;
    }

    100% {
        bottom: 0;
        left: 0;
    }
}

@keyframes aurora-4 {
    0% {
        bottom: -50%;
        right: 0;
    }

    50% {
        bottom: 0%;
        right: 40%;
    }

    90% {
        bottom: 50%;
        right: 25%;
    }

    100% {
        bottom: -50%;
        right: 0;
    }
}

@keyframes aurora-border {
    0% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }

    25% {
        border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;
    }

    50% {
        border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;
    }

    75% {
        border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;
    }

    100% {
        border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;
    }
}